Props এর মাধ্যমে Dynamic Components তৈরি

Riot.js-এ Props ব্যবহারের মাধ্যমে আপনি Dynamic Components তৈরি করতে পারেন। Props হল কম্পোনেন্টের বাইরে থেকে পাস করা ডাটা, যা কম্পোনেন্টের ভিতরে ব্যবহার করা হয়। এই Props এর মাধ্যমে, আপনি কম্পোনেন্টের আচরণ বা UI ডাইনামিকভাবে পরিবর্তন করতে পারেন।

Props এর মাধ্যমে Dynamic Components তৈরি

Riot.js-এ, যখন আপনি কম্পোনেন্ট তৈরি করেন, তখন আপনি opts (অথবা Props) ব্যবহার করে বাহির থেকে ডাটা পাস করতে পারেন। এতে করে কম্পোনেন্টটির অভ্যন্তরীণ আচরণ পরিবর্তিত হতে পারে এবং UI রেন্ডারিংও ডাইনামিকভাবে বদলাতে পারে।

উদাহরণ: Props দিয়ে Dynamic Title কম্পোনেন্ট তৈরি

ধরা যাক, আপনি একটি Card কম্পোনেন্ট তৈরি করতে চান, যার শিরোনাম Dynamic হতে পারে, অর্থাৎ Props এর মাধ্যমে শিরোনাম পরিবর্তন করা যাবে।

১. Card.riot কম্পোনেন্ট তৈরি:

<!-- Card.riot -->
<card>
  <div class="card">
    <h2>{opts.title}</h2> <!-- Use props to display the title -->
    <p>{opts.content}</p> <!-- Use props to display dynamic content -->
  </div>

  <style>
    .card {
      border: 1px solid #ddd;
      padding: 20px;
      border-radius: 5px;
      margin: 10px 0;
    }

    h2 {
      color: #333;
    }
  </style>
</card>

এখানে:

• opts.title এবং opts.content হলো Props যা বাহির থেকে কম্পোনেন্টে পাস করা হবে।
• এই Props দ্বারা শিরোনাম এবং কন্টেন্ট ডাইনামিকভাবে প্রদর্শিত হবে।

২. App.riot ফাইলে Card কম্পোনেন্ট ব্যবহার:

<!-- App.riot -->
<app>
  <h1>Dynamic Card Components</h1>

  <!-- Passing dynamic title and content to the Card component -->
  <card title="Card 1 Title" content="This is the content of Card 1"></card>
  <card title="Card 2 Title" content="This is the content of Card 2"></card>
  <card title="Card 3 Title" content="This is the content of Card 3"></card>
</app>

<script>
  import './Card.riot';  // Importing the Card component
</script>

এখানে:

• Props (title, content) কে Card কম্পোনেন্টে পাস করা হচ্ছে।
• প্রতিটি Card কম্পোনেন্টের জন্য ভিন্ন ভিন্ন শিরোনাম এবং কন্টেন্ট পাস করা হচ্ছে।

আরও ডাইনামিক কম্পোনেন্ট তৈরি:

আমরা যদি আরও ডাইনামিক বা কনফিগারযোগ্য কম্পোনেন্ট তৈরি করতে চাই, তবে Props এর সাথে JavaScript ফাংশন, ইভেন্ট হ্যান্ডলার, বা অবজেক্ট পাস করেও আরও বেশি কার্যকারিতা যোগ করতে পারি।

উদাহরণ: Dynamic Button কম্পোনেন্ট

ধরা যাক, আমরা একটি Button কম্পোনেন্ট তৈরি করতে চাই, যেখানে label (লেবেল) এবং onClick (ক্লিক হ্যান্ডলার) Props হিসেবে পাস করা যাবে।

<!-- Button.riot -->
<button class="dynamic-button" onclick={opts.onClick}>{opts.label}</button>

<style>
  .dynamic-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
  }

  .dynamic-button:hover {
    background-color: #0056b3;
  }
</style>

এখানে:

• opts.label দ্বারা Button এর টেক্সট ডাইনামিকভাবে পরিবর্তিত হবে।
• opts.onClick দ্বারা ক্লিকের জন্য একটি কাস্টম ফাংশন পাস করা যাবে।

App.riot এ Dynamic Button ব্যবহার:

<app>
  <h1>Dynamic Button Example</h1>

  <!-- Passing label and onClick function dynamically -->
  <button label="Click Me" onClick={handleClick}></button>
  <button label="Submit" onClick={submitForm}></button>
  <button label="Cancel" onClick={cancelAction}></button>
</app>

<script>
  import './Button.riot';  // Importing the Button component

  export default {
    handleClick() {
      alert('Button Clicked!');
    },

    submitForm() {
      alert('Form Submitted!');
    },

    cancelAction() {
      alert('Action Cancelled!');
    }
  }
</script>

এখানে:

• প্রতিটি Button কম্পোনেন্টে ভিন্ন ভিন্ন label এবং onClick পাস করা হয়েছে।
• handleClick, submitForm, এবং cancelAction ফাংশনগুলি পাস করা হয়েছে, যেগুলি বোতাম ক্লিক হলে কার্যকর হবে।

Props দিয়ে Dynamic কম্পোনেন্ট তৈরি করার সুবিধা:

1. Reusability (পুনঃব্যবহারযোগ্যতা): একবার তৈরি করা কম্পোনেন্ট বিভিন্ন ডাটা এবং কনফিগারেশন দিয়ে পুনঃব্যবহার করা যায়।
2. Modularity (মডুলারিটি): কম্পোনেন্টের ভিতরে শুধু একটি সাধারণ লজিক থাকবে, এবং বাহির থেকে Props দিয়ে সেটি কাস্টমাইজ করা যাবে।
3. Flexibility (নমনীয়তা): Props ব্যবহার করে কম্পোনেন্টের আচরণ ডাইনামিকভাবে পরিবর্তন করা যায়, যেমন UI, ইভেন্ট হ্যান্ডলার, স্টাইল ইত্যাদি।

Riot.js-এ Props ব্যবহার করে আপনি খুব সহজেই ডাইনামিক এবং পুনঃব্যবহারযোগ্য কম্পোনেন্ট তৈরি করতে পারেন। বাহির থেকে পাস করা ডাটা বা কাস্টমাইজড ফাংশনগুলির মাধ্যমে আপনার কম্পোনেন্টের আচরণ পরিবর্তন করা সম্ভব। এটি কোডকে আরও মডুলার, রক্ষণাবেক্ষণযোগ্য, এবং ডাইনামিক করে তোলে।